<template>
  <div class="w-card content-box">
    <div class="title-box">
      <span class="title">号卡商品详情</span>
      <el-button style="margin-left:auto;" type="primary" plain @click="toEditGoods">编辑</el-button>
      <el-button v-show="goodsForm.shelveStatus == 1" type="danger" @click="delistHandle(1)">下架</el-button>
      <el-button v-show="goodsForm.shelveStatus == 0" type="success" @click="delistHandle(2)">上架</el-button>
    </div>
    <div class="f-title" style="margin-top: 20px;">商品基本信息</div>
    <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
      <el-col :span="6">
        <span>商品名称：</span>
        <span>{{ goodsForm.goodsName || '' }}</span>
      </el-col>
      <el-col :span="6">
        <span>商品编码：</span>
        <span>{{ goodsForm.goodsId || '' }}</span>
      </el-col>
      <el-col :span="6">
        <span>商品状态：</span>
        <span>{{ goodsForm.shelveStatus == 1 ? '上架' : goodsForm.shelveStatus == 0 ? '下架' : '' }}</span>
      </el-col>
    </el-row>
    <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
      <el-col :span="6">
        <span>上游平台：</span>
        <span>{{ goodsForm.channelName || '' }}</span>
      </el-col>
      <el-col :span="6">
        <span>平台商品编码：</span>
        <span>{{ goodsForm.channelGoodsCode || '' }}</span>
      </el-col>
      <el-col :span="6">
        <span>平台商户名称：</span>
        <span>{{ goodsForm.channelShopName || '' }}</span>
      </el-col>
    </el-row>
    <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
      <el-col :span="6">
        <span>{{ goodsForm.shelveStatus == 1 ? '上架' : goodsForm.shelveStatus == 0 ? '下架' : '' }}时间：</span>
        <span>{{ goodsForm.shelveStatus == 1 ? getDateTime(goodsForm.shelveTime)[6] : goodsForm.shelveStatus == 0 ? getDateTime(goodsForm.unshelveTime)[6] : '' }}</span>
      </el-col>
      <el-col :span="6">
        <span>运营商：</span>
        <span>{{ goodsForm.operator || '' }}</span>
      </el-col>
      <el-col :span="6">
        <span>归属地：</span>
        <span>{{ goodsForm.belongingPlace || '' }}</span>
      </el-col>
    </el-row>
    <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;"
      v-show="goodsForm.premoneyList && goodsForm.premoneyList.length > 0">
      <el-col>
        <span style="font-size: 14px;">可选预存：</span>
        <span v-for="(item,index) in goodsForm.premoneyList"
          :key="item">{{ index > 0 ? '、'+item.activityTitle : item.activityTitle }}</span>
      </el-col>
    </el-row>
    <!-- <div class="f-title" style="margin-top: 20px;">佣金配置</div>
    <el-row class="padxy20" style="padding-bottom: 0;">
      <el-col :span="12">
        <div class="back-box padxy20">
          <div style="color: #7F7F7F;" v-show="!goodsForm.incomeConfList || goodsForm.incomeConfList.length == 0">暂无佣金配置</div>
          <div v-for="(item,index) in goodsForm.incomeConfList" :key="item">
            <span style="color: #7F7F7F;">佣金配置{{ index + 1 }}：</span>
            <span>{{ item.runState == 1 ? '激活' : item.runState == 2 ? '首充' : '' }}{{ numFormat(item.income) ? '-佣金'+numFormat(item.income)+'元' : '' }}{{ item.freezenDay >= 0 ? '，冻结期'+item.freezenDay+(item.gaveType == 1 ? '天' : item.gaveType == 2 ? '月' : '天') : '' }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="f-title" style="margin-top: 20px;">分配比例</div>
    <el-row class="padxy20" style="padding-bottom: 0;">
      <el-col :span="12">
        <div class="back-box padxy20">
          <div>
            <span style="color: #7F7F7F;">总部留存：</span>
            <span>{{ goodsForm.incomeDiscount }}‰</span>
          </div>
        </div>
      </el-col>
    </el-row> -->
    <div class="f-title" style="margin-top: 20px;">限制条件</div>
    <el-row class="padxy20" style="padding-bottom: 0;">
      <el-col :span="12">
        <div class="back-box padxy20">
          <div>
            <span style="color: #7F7F7F;">发货地限制：</span>
            <span>{{ goodsForm.addressRestrictType == -1 ? '不限制' : goodsForm.addressRestrictType == 1 ? '不发货地' : goodsForm.addressRestrictType == 2 ? '仅发货地' : '' }}</span>
            <span v-show="goodsForm.addressRestrict">({{ goodsForm.addressRestrict }})</span>
          </div>
          <div>
            <span style="color: #7F7F7F;">年龄限制(周岁)：</span>
            <span>{{ goodsForm.minAge + '~' + goodsForm.maxAge }}</span>
          </div>
          <!-- <div>
            <span style="color: #7F7F7F;">是否需要填写民族：</span>
            <span>{{ goodsForm.minz == 0 ? '不需要' : goodsForm.minz == 1 ? '需要' : '' }}</span>
          </div> -->
        </div>
      </el-col>
    </el-row>
    <div class="f-title" style="margin-top: 20px;">一证N号限制</div>
    <el-row class="padxy20" style="padding-bottom: 0;">
      <el-col :span="12">
        <div class="back-box padxy20">
          <div>
            <span style="color: #7F7F7F;">最近天数：</span>
            <span>{{ goodsForm.idcardCheckDay || '不限制' }}</span>
          </div>
          <div>
            <span style="color: #7F7F7F;">开户数量：</span>
            <span>{{ goodsForm.idcardCheckNum || '不限制' }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="f-title" style="margin-top: 20px;">商品详细信息</div>
    <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
      <el-col :span="6">
        <span>月租(元)：</span>
        <span>{{ numFormat(goodsForm.monthRent) || '' }}</span>
      </el-col>
      <el-col :span="6">
        <span>流量(G)：</span>
        <span>{{ goodsForm.monthFlow || '' }}</span>
      </el-col>
      <el-col :span="6">
        <span>语音价格(元/分钟)：</span>
        <span>{{ numFormat(goodsForm.callPrice) || '' }}</span>
      </el-col>
    </el-row>
    <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
      <el-col :span="18">
        <span>优惠：</span>
        <span>{{ goodsForm.preferential || '' }}</span>
      </el-col>
    </el-row>
    <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
      <el-col :span="18" class="flstart">
        <span class="titleText">商品主图：</span>
        <img style="width: 150px;" :src="goodsForm.headImg" alt="">
      </el-col>
    </el-row>
    <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
      <el-col :span="18" class="flstart">
        <span class="titleText">商品详情：</span>
        <div class="vhtml-box" v-html="goodsForm.goodsDetail"></div>
      </el-col>
    </el-row>
    <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
      <el-col :span="18">
        <span>备注：</span>
        <span>{{ goodsForm.remark || '' }}</span>
      </el-col>
    </el-row>
  </div>
  <confirm-pass ref="confirmPassRef" @verification="verification" />
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { numFormat, warningDeal, getDateTime, successDeal } from '@/utils/utils'
import api from '../api'
import confirmPass from '@/components/confirmPass.vue'
export default {
  components: {
    confirmPass,
  },
  setup() {
    const route = useRoute()
    const router = useRouter()

    const confirmPassRef = ref(null)

    const state = reactive({
      goodsId: null,
      handleType: null,
      goodsForm: {},
    })

    function toEditGoods() {
      router.push({ path: '/goodsManage/cardGoods/editGoods', query: { goodsId: state.goodsId } })
    }

    function delistHandle(type) {
      state.handleType = type
      let title = ''
      let msg = ''
      switch (type) {
        case 1:
          title = '是否下架该商品？'
          msg = '商品下架后，该商品将不能被售卖'
          break
        case 2:
          title = '是否上架该商品？'
          msg = '商品上架后，该商品将可以继续销售'
          break
      }
      confirmPassRef.value.dialogShow(title, msg, false)
    }

    function goodsUnshelve(goodsId) {
      const obj = {
        goodsId
      }
      api.goodsUnshelve(obj).then(res => {
        if (res.code == '200') {
          successDeal(res.msg)
          getGoodsDetail()
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function goodsShelve(goodsId) {
      const obj = {
        goodsId
      }
      api.goodsShelve(obj).then(res => {
        if (res.code == '200') {
          successDeal(res.msg)
          getGoodsDetail()
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getGoodsDetail() {
      if (!state.goodsId) return
      const obj = {
        goodsId: state.goodsId
      }
      api.goodsQryDetail(obj).then(res => {
        if (res.code == '200') {
          state.goodsForm = res.data
          state.goodsForm.monthRent = res.data.monthRent / 100
          state.goodsForm.callPrice = res.data.callPrice / 100
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function verification() {
      switch (state.handleType) {
        case 1:
          goodsUnshelve(state.goodsId)
          break
        case 2:
          goodsShelve(state.goodsId)
          break
      }
    }

    onMounted(() => {
      state.goodsId = route.query.goodsId || null
      getGoodsDetail()
    })

    return {
      ...toRefs(state),
      confirmPassRef,
      toEditGoods,
      numFormat,
      getDateTime,
      verification,
      delistHandle,
    }
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .title-box {
    display: flex;
    align-items: center;
    > .title {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
.f-title {
  box-sizing: border-box;
  padding: 10px 0;
  border-bottom: 1px solid #e9e9e9;
  font-size: 14px;
  font-weight: bold;
}
.padx20 {
  box-sizing: border-box;
  padding: 0 20px;
}
.padxy20 {
  box-sizing: border-box;
  padding: 20px;
}
.info-box {
  > .el-col {
    span {
      font-size: 14px;
    }
    > span:last-of-type {
      color: #5a5a5a;
    }
    > .titleText {
      color: #000000 !important;
    }
  }
}
.back-box {
  background-color: #f1f1f1;
  > div {
    font-size: 14px;
  }
  > div:not(:first-of-type) {
    margin-top: 10px;
  }
}
.flstart {
  display: flex;
  align-items: flex-start;
  > span {
    flex-shrink: 0;
  }
}
.vhtml-box {
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #eeeeee;
}
</style>
<style>
.vhtml-box img {
  max-width: 100%;
}
</style>